<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="utf-8">
<title>注册</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
<meta name="author" content="Vincent Garreau"/>
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../static/css/login/style.css" th:href="@{/css/login/style.css}"
      media="all"/>
<link rel="stylesheet" href="../static/lib/layui/css/layer.css" th:href="@{/lib/layui/css/layer.css}" media="all">
<link rel="stylesheet" type="text/css" href="../static/css/login/reset.css"
      th:href="@{/css/login/reset.css}" media="all"/>
</head>
<style type="text/css">
    .login-button{
        display: block;
    }
</style>
<body>

<div id="particles-js">
    <form class="login" id="login-form">
        <div class="login-top" >
            注册
        </div>

        <div class="login-center clearfix">
            <div class="login-center-img">
                <img src="../static/images/password.png"
                     th:src="@{/images/password.png}"/>
            </div>
            <div class="login-center-input">
                <input type="password" name="password" value="" placeholder="请输入您的密码" onfocus="this.placeholder=''"
                       onblur="this.placeholder='请输入您的密码'"/>
                <div class="login-center-input-text">密码</div>
            </div>
        </div>
        <div class="login-button" id="login-button">
            注册
        </div>
        <a class="login-button" href="/page/login">
            跳转登录
        </a>
    </form>
    <div class="sk-rotating-plane"></div>
</div>

<!-- scripts -->
<script src="../static/lib/jquery/jquery-3.2.1.min.js" th:src="@{/lib/jquery/jquery-3.2.1.min.js}"></script>
<script src="../static/js/login/particles.min.js" th:src="@{/js/login/particles.min.js}"></script>
<script src="../static/js/login/app.js" th:src="@{/js/login/app.js}"></script>
<script src="../static/js/common/public.js" th:src="@{/js/common/public.js}"></script>
<script src="../static/lib/layui/lay/modules/layer.js" th:src="@{/lib/layui/lay/modules/layer.js}"></script>
<script type="text/javascript">
    (function () {
        function bindAction() {
            $('#login-button').click(function () {
                register(constructArgs($('#login-form')))
            })
            $(document).keyup(function(event){
                if(event.keyCode ==13){
                    register(constructArgs($('#login-form')))
                }
            });
        }
        bindAction();
        function register(param) {
            $.ajax({
                url: '/register',
                type:'POST',
                data: param,
                success: function (data) {
                    try {
                        if (data.code == 0) {
                            layer.alert("您的账号为" + data.data.id + ",请谨记!");
                        } else {
                            layer.msg(data.msg)
                        }
                    } catch (e) {
                        location.href='/page/login'
                    }
                }
            })
        }
    })()
</script>
</body>
</html>